<template>
    <div>
        <input type="text" placeholder="请输入关键字" v-model="keyword" @focus="keyword=''"><input type="button" value="查找" @click="btnsea">
        <input type="button" value="新增" @click="btnadd">
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>班级</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in stuarr">
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Sex }}</td>
                    <td>{{ item.Age }}</td>
                    <td>{{ item.sClass }}</td>
                    <td>
                        <input type="button" value="编辑" @click="btnedit(item.id)">
                        <input type="button" value="删除" @click="btndel(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { delData, fetchAllData } from '@/router/utils';
import { useRoute,useRouter } from 'vue-router';
const router =useRouter()
const stuarr =ref([])
const keyword =ref('')
onMounted(async ()=>{
   let data =await fetchAllData()
   stuarr.value=data.data
})
async function btndel(id){
    if(confirm('你确定删除吗？')){
        await delData(id) 
        alert('删除成功')
        router.go(0)
    }
}
function btnedit(id){
    router.push(`/stuaddoredit/${id}`)
}
function btnadd(){
    router.push('stuaddoredit')
}
async function btnsea(){
   const data= await fetchAllData(keyword.value)
    stuarr.value.splice(0)
    stuarr.value.push(...data.data)
}
</script>